<template>
  <view class="guardian-wrap">
    <view class="list">
			<view v-for="(item, index) of list" :key="index" class="item">
				<header-title v-if="index" :title="headerTitle"></header-title>
				<header-title v-else :title="headerTitle"></header-title>
				<view class="name desc">姓名：{{item.userName}}</view>
				<view class="id-number desc">身份证号：{{item.userIdCard ? item.userIdCard:'暂无'}}</view>
				<view class="phone desc">联系电话：{{item.userPhone}}</view>
				<!-- <view class="relation desc">与我的关系：{{item.relation}}</view> -->
				<view class="button-wrap">
					<button class="message-btn btn" @click="handleMessage(item.userId,item.userName,item.userPhoto)">
						<image src="/static/images/analyze/message.png" mode=""></image>
						发信息
					</button>
					<button class="phone-btn btn" @click="callPhone(item.userPhone)">
						<image src="/static/images/analyze/phone.png" mode=""></image>
						打电话
					</button>
				</view>
			</view>
		</view>
  </view>
</template>

<script>
	import headerTitle from './header'
	import {guarderRequest} from '../../../api/charts'
export default {
  data() {
    return {
			list: [],
			headerTitle: '第一监护人',
			headerTitleTwo: '第二监护人'
    }
  },
	components: {
		headerTitle
	},
	created() {
		this.initData()
	},
	methods:{
		async initData() {
			uni.showLoading({
				title: '加载中'
			})
			const res = await guarderRequest()
			this.list = res
			uni.hideLoading()
		},
		callPhone(phone) {
			console.log(phone)
			uni.makePhoneCall({
				phoneNumber: phone
			})
		},
		handleMessage(userId, userName, userPhoto) {
			this.$chatRecord(userId, {}, 'text').messageShow()
			uni.navigateTo({
				url: `/pages/chat/index?userId=${userId}&userName=${userName}&userPhoto=${escape(userPhoto)}`
			})
		}
	}
}

</script>
<style lang='scss' scoped>
.guardian-wrap{
  width: 100%;
	padding: 20upx;
	box-sizing: border-box;
	background-color: #f0f0f0;
	.list{
		width: 100%;
		.item{
			width: 100%;
			margin-bottom: 20upx;
			background: #fff;
			border-radius:10upx;
			padding: 0 20upx 42upx;
			box-sizing: border-box;
			overflow: hidden;
			&:nth-last-of-type(1) {
				margin-bottom: 0;
			}
			.name{
				margin-top: 30upx;
			}
			.desc{
				color: #0D84D5;
				line-height: 52upx;
				font-size: 30upx;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.relation{
				margin-bottom: 22upx;
			}
			.button-wrap{
				display: flex;
				width: 100%;
				justify-content: space-between;
				.btn{
					width:320upx;
					height:90upx;
					background:rgba(12,188,128,1);
					border-radius:10upx;
					border: none;
					outline: none;
					color: #fff;
					font-size: 38upx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #0CBC80;
					image{
						width:52upx;
						height:50upx;
						margin-right: 20upx;
					}
				}
				.phone-btn{
					background-color: #F93A3A;
					image{
						width:47upx;
						height:49upx;
					}
				}
			}
		}
	}
}
</style>